<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="Expires" content="-1" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="manifest" href="manifest.json" />
    <title>Paypaya</title>
    <% if (REACT_APP_CORDOVA) { %>
    <script type="text/javascript" src="./cordova.js"></script>
    <script type="text/javascript" src="./cordova_plugins.js"></script>
    <% } %>
  </head>

  <body>
    <script>
      // https://github.com/amfe/lib-flexible/blob/2.0/index.js
      ;(function flexible(window, document) {
        var min = 26
        var max = 50
        var docEl = document.documentElement
        var fixRate = 1
        var fixAttachElement = document.createElement('div')
        fixAttachElement.style.width = '10rem'
        fixAttachElement.style.position = 'absolute'
        fixAttachElement.style.zIndex = -1000
        fixAttachElement.style.pointerEvents = 'none'

        // 计算尺寸修复比率
        // 部分机型上 10rem 不等于屏幕宽度，此处计算修正值
        function calcFixRate() {
          try {
            document.body.appendChild(fixAttachElement)
            fixRate = docEl.clientWidth / fixAttachElement.offsetWidth
            document.body.removeChild(fixAttachElement)
          } catch (err) {
            //
          }
        }

        function clamp(value, min, max) {
          return value > max ? max : value < min ? min : value
        }

        function setRemUnit() {
          var rem = docEl.clientWidth / 10
          docEl.style.fontSize = clamp(rem, min, max) + 'px'
          calcFixRate()
          docEl.style.fontSize = clamp(rem * fixRate, min, max) + 'px'
        }

        function func() {
          if (document.readyState === 'interactive') {
            setRemUnit()
            window.addEventListener('resize', setRemUnit)
            document.removeEventListener('readystatechange', func)
          }
        }
        document.addEventListener('readystatechange', func)
        setRemUnit()
      })(window, document)
    </script>
    <div id="root"></div>
    <% if (REACT_APP_CORDOVA) { %>
    <pwa-install
      id="pwa-install"
      manifest-url="manifest.json"
      manual-chrome="true"
      manual-apple="true"
    ></pwa-install>
    <script>
      var pwaInstall = document.getElementById('pwa-install')
      window.PWA_INSTALL = pwaInstall
    </script>
    <% } %>
    <div id="spinner" class="show">
      <style>
        #spinner {
          background: #fff;
          position: absolute;
          z-index: 1000;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          transition: opacity 0.3s;
          -webkit-transition: opacity 0.3s;
        }

        #spinner.show {
          opacity: 1;
        }

        #spinner.hide {
          opacity: 0;
        }

        #spinner .spinner {
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
        }

        .circle {
          box-sizing: border-box;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 2px solid lightgray;
          border-left-color: #333;
          -webkit-animation: loader_rotate 1s linear infinite;
          animation: loader_rotate 1s linear infinite;
        }

        @-webkit-keyframes loader_rotate {
          from {
            transform: rotate(0);
            -webkit-transform: rotate(0);
          }

          to {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
          }
        }

        @keyframes loader_rotate {
          from {
            transform: rotate(0);
            -webkit-transform: rotate(0);
          }

          to {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
          }
        }
      </style>
      <div class="spinner">
        <div class="circle"></div>
      </div>
      <script>
        setTimeout(function () {
          var spinner = document.getElementById('spinner')

          function func() {
            if (!spinner) {
              return
            }

            if (document.readyState === 'complete') {
              spinner.className = 'hide'
              setTimeout(function () {
                if (spinner.parentNode) {
                  spinner.parentNode.removeChild(spinner)
                }
              }, 1000)
              document.removeEventListener('readystatechange', func)
            }
          }
          document.addEventListener('readystatechange', func)
          setTimeout(func, 100)
        })
        ;[]
      </script>
    </div>
    <!-- <script>
      if (/(iPhone|iPad|iPod|iOS)/i.test(window.navigator.userAgent)) {
        window.__ios__reload__timeout__ = setTimeout(function () {
          window.location.reload()
        }, 3000)
      }
    </script> -->
  </body>
</html>
